<script lang="ts">
	import { imageBasePath, variables } from '$store/g';
	import RetinaBgImage from '$lib/RetinaBgImage.svelte';
</script>

<div class="solution-part">
	<div class="pl-[38px] pt-[102px]">
		<div class="solution-part-title">{$variables.siteName}社群</div>
		<div class="solution-part-sub-title">免费、好用的微信社群工具,助你私域运营更高效</div>
		<div class="pt-4 grid grid-flow-col grid-cols-4  text-primary text-[14px]">
			<div><em class="iconfont icon-check-circle w-4 h-4 mr-3" />功能齐全</div>
			<div><em class="iconfont icon-check-circle w-4 h-4 mr-3" />资金安全</div>
			<div><em class="iconfont icon-check-circle w-4 h-4 mr-3" />免费入驻</div>
		</div>
		<div class="pt-[39px]">
			<a
				class="rounded-[37.5px] px-4 py-2 text-xl bg-primary text-white flex justify-center items-center w-36 h-16"
				href="void:(0)">免费体验</a
			>
		</div>
	</div>
	<RetinaBgImage
		imgSrc="{$imageBasePath}/solution.png"
		img2xSrc="{$imageBasePath}/solution@2x.png"
		alt="solution"
		classes="w-[621px] h-[460px] bg-no-repeat bg-cover bg-center"
	/>
</div>
<div class="mx-auto mt-3 w-[1324px] h-[224px] bg-[#f9f9f9] rounded-3xl grid grid-cols-4">
	<div class="solution-role">
		<RetinaBgImage
			imgSrc="{$imageBasePath}/solution-brand.png"
			img2xSrc="{$imageBasePath}/solution-brand@2x.png"
			alt="solution-brand"
			classes="w-[44px] h-[38px] bg-no-repeat bg-cover bg-center"
		/>
		<div class="solution-role-name !pt-[22px]">品牌方</div>
		<div class="solution-role-desc">有货源，寻求私域客户与业绩增长</div>
	</div>
	<div class="solution-role">
		<RetinaBgImage
			imgSrc="{$imageBasePath}/solution-distributor.png"
			img2xSrc="{$imageBasePath}/solution-distributor@2x.png"
			alt="solution-distributor"
			classes="w-[48px] h-[45px] bg-no-repeat bg-cover bg-center"
		/>
		<div class="solution-role-name  !pt-[15px]">分销员</div>
		<div class="solution-role-desc">为品牌分销，品牌直供优质货源</div>
	</div>
	<div class="solution-role">
		<RetinaBgImage
			imgSrc="{$imageBasePath}/solution-spokesman.png"
			img2xSrc="{$imageBasePath}/solution-spokesman@2x.png"
			alt="solution-spokesman"
			classes="w-12 h-12 bg-no-repeat bg-cover bg-center"
		/>
		<div class="solution-role-name">代言人</div>
		<div class="solution-role-desc">为品牌代言，种草好物给粉丝</div>
	</div>
	<div class="solution-role">
		<RetinaBgImage
			imgSrc="{$imageBasePath}/solution-fans.png"
			img2xSrc="{$imageBasePath}/solution-fans@2x.png"
			alt="solution-fans"
			classes="w-12 h-12 bg-no-repeat bg-cover bg-center"
		/>
		<div class="solution-role-name">粉丝</div>
		<div class="solution-role-desc">购买品牌好物，参与品牌活动</div>
	</div>
</div>
<div class="solution-part">
	<RetinaBgImage
		imgSrc="{$imageBasePath}/solution-activity.png"
		img2xSrc="{$imageBasePath}/solution-activity@2x.png"
		alt="solution-activity"
		classes="w-[674px] h-[443px] bg-no-repeat bg-cover bg-center"
	/>
	<div class="px-[120px] pt-[153px]">
		<div class="solution-part-title">社群活动多样化、日历化</div>
		<div class="solution-part-sub-title">
			签到、抽奖、团购等多种简单好玩的活动，解决社群拉新、留存、活跃、转化等难题，让社群运营高效自循环
		</div>
	</div>
</div>
<div class="solution-part">
	<div class="pl-[38px] pt-[153px]">
		<div class="solution-part-title">客户价值更多维</div>
		<div class="solution-part-sub-title">
			品牌可从粉丝中发展分销员、代言人，挖掘其销售贡献、社交传播、行为参与等多层价值
		</div>
	</div>
	<RetinaBgImage
		imgSrc="{$imageBasePath}/solution-customer-value.png"
		img2xSrc="{$imageBasePath}/solution-customer-value@2x.png"
		alt="solution-customer-value"
		classes="w-[653px] h-[443px] bg-no-repeat bg-cover bg-center"
	/>
</div>
<div class="solution-part">
	<RetinaBgImage
		imgSrc="{$imageBasePath}/solution-activity-effect.png"
		img2xSrc="{$imageBasePath}/solution-activity-effect@2x.png"
		alt="solution-activity-effect"
		classes="w-[598px] h-[410px] bg-no-repeat bg-cover bg-center"
	/>
	<div class="px-[120px] pt-[153px]">
		<div class="solution-part-title">活动效果直观呈现</div>
		<div class="solution-part-sub-title">
			团购活动支持查看品牌、分销员、代言人的销售数据，让活动可复盘、可迭代
		</div>
	</div>
</div>
<div class="solution-part">
	<div class="pl-[38px] pt-[153px]">
		<div class="solution-part-title">群流量可循环</div>
		<div class="solution-part-sub-title">
			商城系统中的优惠券可直接投放至社群并导流回品牌小程序；主页、活动页均支持配置小程序、微信群、公众号等外部链接，让流量循环起来
		</div>
	</div>
	<RetinaBgImage
		imgSrc="{$imageBasePath}/solution-flow-recycle.png"
		img2xSrc="{$imageBasePath}/solution-flow-recycle@2x.png"
		alt="solution-flow-recycle"
		classes="w-[598px] h-[406px] bg-no-repeat bg-cover bg-center"
	/>
</div>
<div class="solution-part">
	<RetinaBgImage
		imgSrc="{$imageBasePath}/solution-data-assets.png"
		img2xSrc="{$imageBasePath}/solution-data-assets@2x.png"
		alt="solution-data-assets"
		classes="w-[560px] h-[399px] bg-no-repeat bg-cover bg-center"
	/>
	<div class="px-[120px] pt-[153px]">
		<div class="solution-part-title">数据资产不断层</div>
		<div class="solution-part-sub-title">
			打通品牌商城系统，客户、商品库、仓库等数据可直接继承，便捷使用
		</div>
	</div>
</div>

<style lang="scss">
	.solution-role {
		@apply flex flex-col pt-12 items-center justify-start;
		.solution-role-name {
			@apply text-[#3B434B] text-xl pt-3 font-semibold;
		}
		.solution-role-desc {
			@apply text-[#999999] pt-3 text-[14px];
		}
	}
</style>
